import React from 'react';
import OrderTabs from './components/OrderTabs';
import { useState, useEffect } from 'react';
import './OrderPage.css';
import { Button, Dialog, Space, Toast, Divider } from 'antd-mobile'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';

const Ruzhuzhong = () => {

  const [list, setList] = useState([])
  const navigate = useNavigate()
  const getList = async () => {
    await axios.post('http://localhost:3010/roomDingList')
      .then(res => {
        if (res.data.code == 200) {
          setList(res.data.list)
        }
      })
  }

  useEffect(() => {
    getList()
  }, [])

  // 格式化日期为 YYYY/M/D
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 月份从0开始
    const day = date.getDate();
    return `${year}/${month}/${day}`;
  };

  //申请退房
  const endroom = async (_id) => {
    await axios.post(`http://localhost:3010/updateRoom`, { _id: _id, status: '已退房' })
      .then(res => {
        if (res.data.code == 200) {
          getList()
        }
      })
  }

  return (
    <div className="order-page">
      <OrderTabs />
      <div className="order-content">
        {
          list.map((item) => {
            if (item.status == '入住中') {
              return (
                <div className="order-item" key={item._id}>
                  <div className="hotel-info">
                    <h3>{item.hname}</h3>
                    <p className="room-type">{item.room}</p>
                    <p className="time">入住时间：{formatDate(item.start)}</p>
                    <p className="time">退房时间：{formatDate(item.end)}</p>
                    <p className="status staying">入住中</p>
                    <div className="action-row">
                      {/* <button className="service-btn">客房服务</button> */}
                      
                      <button className="service-btn" onClick={()=>navigate('/merchant')}>客房服务</button>
                      <Button
                        className="checkout-btn"
                        onClick={async () => {
                          const result = await Dialog.confirm({
                            content: '是否申请退房',
                          })
                          if (result) {
                            await endroom(item._id)
                            Toast.show({ content: '点击了确认', position: 'bottom' })
                          } else {
                            Toast.show({ content: '点击了取消', position: 'bottom' })
                          }
                        }}

                      >
                        申请退房
                      </Button>
                    </div>
                  </div>
                </div>
              )
            }
          })
        }
         <p style={{textAlign:'center',fontSize:'0.3rem',marginTop:'0.5rem',color:'gray'}}>没有更多订单了 ~</p>
      </div>
    </div>
  );
};

export default Ruzhuzhong;